<template>
  <h2>演示reactive的响应式数据</h2>
  <p>用户的姓名是:{{ user.name }}</p>
  <p>用户的年龄是:{{ user.age }}</p>
  <p>车的品牌是:{{ user.car.brand }}</p>
  <p>车的价格是:{{ user.car.price }}</p>
  <button @click="user.name += '@'">修改用户名</button>
  <!-- <button @click="user.age++">修改年龄</button> -->
  <button @click="changeAge">修改年龄</button>
  <button @click="user.car.price++">修改车的价格</button>
  <button @click="aa">给父组件传值</button>
</template>

<script>
import { reactive } from "vue"
export default {
  name: "HelloWord",
  props: ["msg", "school"], //属性用props来接受
  emits: ["hha"], //事件用emits来接收
  setup(a, v) {
    let user = reactive({
      name: "jack",
      age: 20,
      car: {
        brand: "比亚迪",
        price: 160000,
      },
    })
    function aa() {
      v.emit("hha", 123)
    }
    function changeAge() {
      user.age++
    }
    return {
      user,
      aa,
      changeAge,
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
